﻿@model Lead2012.ViewModels.LeadStatisticViewModel
@{
    ViewBag.Title = "Thống kê theo tình trạng";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form id="myForm" action="#" method="post" class="form" enctype="multipart/form-data">
<fieldset>
    <div class="content">
        <h2 class="app">
            <strong>Thống kê theo tình trạng</strong>
        </h2>

        <div id="statSearchBox" class="title nomargin">
            <span class="right-btns">            
                <span class="right-btns">
                    <input id="q" type="text" class="text spl search filter" style="width: 30px" data-bind="value: Year, event: { keypress: RunSomethingKey }" autocomplete="off" placeholder="2012" />
                    <span class="v-line" style="margin-top:0px"></span>
                    <a href="javascript:void(0)" class="btn btn-go" data-bind="click: SearchButton">Go</a>
                </span>
                <span data-bind="foreach: ChartTypeOptions" style="font-size:12px; line-height:16px; margin:3px 40px 0">
                    <input type="radio" name="ChartType" data-bind="value: ID, checked: $root.ChartType" /> <label data-bind="text: ItemName"></label>
                </span>
            </span>

            <h3>Thống kê theo tình trạng</h3>
        </div>

        <!-- header form -->
        <div class="panel rounded">
            <div id="chart1"></div>
        </div>

        <div class="spacer25"></div>
    </div>

</fieldset>
</form>

@section StylesheetBinding
{
    <link href="/Content/jquery.jqplot.min.css" rel="stylesheet" type="text/css" />
}

@section DataBinding
{
    <script type="text/javascript">
        var statData = @(Html.Raw(Json.Encode(Model)));
    </script>
    <script src="/Scripts/viewModel/StatisticViewModel.js" type="text/javascript"></script>

    @if (Model.ChartType == "Bar")
    {
        <script type="text/javascript" src="/Scripts/Plugins/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.barRenderer.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.pointLabels.min.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function(){
                // Can specify a custom tick Array.
                // Ticks should match up one for each y value (category) in the series.
                var ticks = @(Html.Raw(Model.ChartModel.Ticks));
     
                var plot1 = $.jqplot('chart1', [@(Html.Raw(Model.ChartModel.PlotData))], {
                    // The "seriesDefaults" option is an options object that will
                    // be applied to all series in the chart.  
                    seriesDefaults:{
                        renderer:$.jqplot.BarRenderer,
                        rendererOptions: { fillToZero: false },      
                        pointLabels: {show: true}
                    },
                    // Custom labels for the series are specified with the "label"
                    // option on the series option.  Here a series option object
                    // is specified for each series.
                    series:[@(Html.Raw(Model.ChartModel.Series))],
                    // Show the legend and put it outside the grid, but inside the
                    // plot container, shrinking the grid to accomodate the legend.
                    // A value of "outside" would not shrink the grid and allow
                    // the legend to overflow the container.
                    legend: {
                        show: true, 
                        placement: 'outsideGrid'
                    },
                    axes: {
                        // Use a category axis on the x axis and use our custom ticks.
                        xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: ticks
                        },
                        // Pad the y axis just a little so bars can get close to, but
                        // not touch, the grid boundaries.  1.2 is the default padding.
                        yaxis: {
                            pad: 1,
                            tickOptions: {formatString: '%d'}
                        }
                    }
                });
            });
        </script>
    }
    else if (Model.ChartType == "Line")
    {
        <script type="text/javascript" src="/Scripts/Plugins/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.barRenderer.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.highlighter.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.cursor.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.pointLabels.min.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function () {
                plot1 = $.jqplot("chart1", [@(Html.Raw(Model.ChartModel.PlotData))], {
                    // Turns on animatino for all series in this plot.
                    animate: true,
                    // Will animate plot on calls to plot1.replot({resetAxes:true})
                    animateReplot: true,
                    cursor: {
                        show: true,
                        zoom: true,
                        looseZoom: true,
                        showTooltip: false
                    },
                    series: [
                        {
                            pointLabels: {
                                show: true
                            },
                            renderer: $.jqplot.BarRenderer,
                            showHighlight: false,
                            yaxis: 'y2axis',
                            rendererOptions: {
                                animation: {
                                    speed: 2500
                                },
                                barWidth: 15,
                                barPadding: -15,
                                barMargin: 0,
                                highlightMouseOver: false
                            }
                        },
                        {
                            rendererOptions: {
                                animation: {
                                    speed: 2000
                                }
                            }
                        }
                    ],
                    axesDefaults: {
                        pad: 0
                    },
                    axes: {
                        // These options will set up the x axis like a category axis.
                        xaxis: {
                            tickInterval: 1,
                            drawMajorGridlines: false,
                            drawMinorGridlines: true,
                            drawMajorTickMarks: false,
                            rendererOptions: {
                                tickInset: 0.5,
                                minorTicks: 1
                            }
                        },
                        yaxis: {
                            tickOptions: {
                                formatString: "%'d"
                            },
                            rendererOptions: {
                                forceTickAt0: true
                            }
                        },
                        y2axis: {
                            tickOptions: {
                                formatString: "%'d"
                            },
                            rendererOptions: {
                                // align the ticks on the y2 axis with the y axis.
                                alignTicks: true,
                                forceTickAt0: true
                            }
                        }
                    },
                    highlighter: {
                        show: true,
                        showLabel: true,
                        tooltipAxes: 'y',
                        sizeAdjust: 7.5, tooltipLocation: 'ne'
                    }
                });

            });
        </script>
    }
    else
    {
        <script type="text/javascript" src="/Scripts/Plugins/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.pieRenderer.min.js"></script>
        <script type="text/javascript" src="/Scripts/plugins/jqplot.donutRenderer.min.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function () {
                var plot1 = jQuery.jqplot('chart1', [@(Html.Raw(Model.ChartModel.PlotData))],
                {
                    seriesDefaults: {
                        // Make this a pie chart.
                        renderer: jQuery.jqplot.PieRenderer,
                        rendererOptions: {
                            // Put data labels on the pie slices.
                            // By default, labels show the percentage of the slice.
                            showDataLabels: true
                        },
                        pointLabels: {show: true}
                    },
                    legend: { show: true, location: 'e' }
                }
              );
            });
        </script>
    }
}